<template>
  <view class="search">
    {{ t("OE search") }}
    <view class="from">
      <textarea class="text_box" :placeholder="isEnt ? '' : t('searchPl')" @focus="isEnt = true" @blur="isEnt = false"
        v-model="searchText" placeholder-style="font-size:28rpx"></textarea>
    </view>
    <view class="from_btn" @click="goToView">
      {{ t('Search') }}
    </view>
    <view class="from_btn" @click="clearSearch" style="background: transparent; color: #444; margin-top: 0;">
      {{ t('Clear all') }}
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import { useI18n } from "vue-i18n";


const { t } = useI18n();
const isEnt = ref(false);
const searchText = ref("");


const goToView = () => {
  if (!searchText.value) {
    uni.showToast({
      title: t("Please enter search content"),
      icon: "none",
    });
    return;
  }
  uni.setStorageSync("search", searchText.value);
  uni.navigateTo({
    url: "/pages/index/homeSearchList",
  });
};

const clearSearch = () => {
  searchText.value = "";
};
</script>

<style lang="scss" scoped>
.search {
  width: 94%;
  margin: 30rpx auto 0;

  .from {
    margin-top: 10rpx;
    padding: 20rpx;
    background: #fff;
    border-radius: 20rpx;
    box-sizing: border-box;

    .text_box {
      width: 100%;
    }
  }

  .from_btn {
    margin-top: 20rpx;
    background: #1AAD19;
    color: #fff;
    padding: 20rpx 0;
    text-align: center;
    border-radius: 10rpx;
  }
}
</style>